<template>
	<view class="next_content">
		<view class="top_list" >
				<view class="list_content" :class="bg_active === index ? 'is_bg_active' : '' " 
				:style="bg_active === index ? 'backgroundColor:#FFF6F6' : 'backgroundColor:#e3e3e3'"
				v-for="(item,index) in grand_lotto_list_number" :key="index"
				@click="handleAlllist(item,index)"
				>
					<view class="left_close">
						<image src="../../../static/image/icon-close.png" class="close_img" @click.stop="handleDel(item,index)"></image>
					</view>
					<view class="middle_red">
						<view class="start_ball">
							<view class="dragging_num">
								<view class="dra_item_drag" v-for="item in grand_lotto_list_number[index].red_drag">{{ item }}</view>
								<text style="font-size: 14px;margin-left: 5px;color: #a5a5a5;" v-show="grand_lotto_list_number[index].red_drag.length > 0">(胆)</text>
							</view>
							<view class="dragging_num">
								<view class="dra_item" v-for="item in grand_lotto_list_number[index].red">{{ item }}</view>
							</view>
						</view>
						<view class="last_ball">
							<view class="dragging_num">
								<view class="dra_item_drag" v-for="item in grand_lotto_list_number[index].blue_drag">{{ item }}</view>
								<text style="font-size: 14px;margin-left: 5px;color: #a5a5a5;" v-show="grand_lotto_list_number[index].blue_drag.length > 0">(胆)</text>
							</view>
							<view class="dragging_num">
								<view class="dra_item" v-for="item in grand_lotto_list_number[index].blue">{{ item }}</view>
							</view>
						</view>
					</view>
					<view class="beilv">
						<view class="beilv_content" @click="handleAddMultiplier(item,index)">{{ item.num }}倍</view>
					</view>
				</view>
		</view>
		<view class="btn_list">
			<view class="btn" @click="handleAdd">再加一注</view>
			<view class="btn">机选</view>
			<!-- <view class="btn">幸运号</view> -->
		</view>
		<view class="next_top">
			<view class="next_top_left">
				<view class="left_btn" v-if="unionShow === 0"  @click="handleChooseDM">{{ unionText }}</view>
				<view class="left_change_btn" v-else @click="handleOutunion">退出胆拖</view>
			</view>
			<view class="next_top_right">{{ text }}</view>
		</view>
		<view class="red_ball">前区:</view>
		<view class="red_list">
			<view
				:class="{ 'isNormalRed':item.selected == false, 'isRedactive':item.selected == true , 'isUnionactive': item.selected == 'union'}"
				@click="handleChooseredball(item,index)" 
				v-for="(item,index) in red_ball_list"
				:key="index"
			>
			{{ item.name }}
			</view>
		</view>
		<view class="red_blue">后区:</view>
		<view class="blue_list">
			<view
				:class="{ 'isNormalblue':item.selected == false, 'isYellowball':item.selected == true , 'isUnionactive': item.selected == 'union'}" 
				@click="handleChooseblueball(item,index)" 
				v-for="(item,index) in blue_ball_list"
				:key="index"
			>
			{{ item.name }}
			</view>
			
			<view class="save" @click="handleSave">保存</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal :show="showMultiplier" showCancelButton @confirm="Multiplierconfirm" @cancel="showMultipliercancel"
			confirmColor="#FA254F">
			<view class="list_step">
				<view class="step_text">当前注的倍率</view>
				<view class="step_content">
					<u-number-box v-model="numberValue" button-size="40" color="#ffffff" bgColor="#FA254F"
						iconStyle="color: #fff" @change="valChange"></u-number-box>
				</view>
			</view>
		</u-modal>
		<u-modal :content="content" :show="showDel" showCancelButton @confirm="confirm" @cancel="cancel"
			confirmColor="#FA254F"></u-modal>
	</view>
</template>

<script>
	export default {
		props:['parentlistglData'],
		data(){
			return{
				delindex:'',
				redNumber:0,
				blueNumber:0,
				numberValue:1,
				stepIndex:0,
				showDel: false,
				showMultiplier:false,
				unionShow:0,//正常模式
				text:'单式',
				unionText:'选胆码',
				content:'是否确认删除，删除后无法恢复！谨慎操作',
				bg_active:0,
				grand_lotto_list_number:[{
					type: 1,
					periods: '0',
					red:[],
					blue:[],
					red_drag:[],
					blue_drag:[],
					num:1,
					model:''
				}],
				red_ball_list:[],
				blue_ball_list:[]
			}
		},
		created() {
			for (var i = 0; i <= 34; i++) {
				this.red_ball_list.push({name: this.formatNumber( i + 1) , selected: false})
			}
			for (let i= 0; i <= 15; i++ ){
				this.blue_ball_list.push({ name: this.formatNumber( i + 1) , selected: false })
			}
			if(this.parentlistglData.length === 0) return
			this.grand_lotto_list_number = this.parentlistglData.map(item => {
				return {
					...item,
					type:5,
					model:'',
					num:1,
					periods:'0'
				}
			})
		},
		methods:{
			valChange(e) {
				this.numberValue = e.value
			},
			formatNumber(num) {
			    return num < 10 ? '0' + num : num.toString();
			},
			handleChooseDM(){
				this.unionShow = 1
				this.text = '胆码模式下只能选择一注'
			},
			handleOutunion(){
				this.unionShow = 0
				this.text = '单式'
			},
			handleAddMultiplier(item,index){
				this.showMultiplier = true
				this.stepIndex = index
			},
			Multiplierconfirm(){
				this.showMultiplier = false
				this.grand_lotto_list_number[this.stepIndex].num = this.numberValue
			},
			showMultipliercancel(){
				this.showMultiplier = false
			},
			handleAlllist(item1,index){
				this.bg_active = index
				this.red_ball_list.forEach(item => {
					item.selected = false
				})
				this.blue_ball_list.forEach(item => {
					item.selected = false
				})
				this.red_ball_list.forEach(item => {
					if (item1.red.includes(item.name)) {
						item.selected = true
					}
				});
				this.blue_ball_list.forEach(item => {
					if (item1.blue.includes(item.name)) {
						item.selected = true
					}
				})
			},
			handleDel(item,index){
				if(this.grand_lotto_list_number.length === 1){
					this.$refs.uToast.show({
					    type:'default',
					    message:'必须要有一注',
					})
					return
				}
				this.showDel = true
				this.delindex = index
			},
			confirm() {
				this.grand_lotto_list_number.splice(this.delindex, 1)
				this.bg_active = this.grand_lotto_list_number.length - 1
				this.red_ball_list.forEach(item => {
					item.selected = false
				})
				this.blue_ball_list.forEach(item => {
					item.selected = false
				})
				this.red_ball_list.forEach(item => {
					if (this.grand_lotto_list_number[this.bg_active].red.includes(item.name)) {
						item.selected = true
					}
				});
				this.blue_ball_list.forEach(item => {
					if (this.grand_lotto_list_number[this.bg_active].blue.includes(item.name)) {
						item.selected = true
					}
				})
				this.showDel = false
			},
			handleChooseredball(item,index){
				if(this.unionShow === 1){
					if(item.selected === true){
						this.$refs.uToast.show({
						    type:'default',
						    message:'该号码已被选为拖码，不能用作胆码',
						}) 
						return
					}
					item.selected = 'union'
					const index3 = this.grand_lotto_list_number[this.bg_active].red_drag.indexOf(item.name)
					if(index3 !== -1){
						item.selected = ''
						this.grand_lotto_list_number[this.bg_active].red_drag.splice(index3 , 1)
					}else{
						if(this.grand_lotto_list_number[this.bg_active].red_drag.length <= 3){
							this.grand_lotto_list_number[this.bg_active].red_drag.push(item.name)
						}else{
							item.selected = ''
							this.$refs.uToast.show({
							    type:'default',
							    message:'前区胆码只能选一到四个之间，包含四个',
							}) 
						}
					}
				}else{
					item.selected =! item.selected
					const index1 = this.grand_lotto_list_number[this.bg_active].red.indexOf(item.name)
					if(index1 !== -1){
						this.grand_lotto_list_number[this.bg_active].red.splice(index1 , 1)
						this.redNumber = this.grand_lotto_list_number[this.bg_active].red.length
						if(this.redNumber + this.blueNumber < 7) {
							this.text = '单式'
						}
					}else{
						this.grand_lotto_list_number[this.bg_active].red.push(item.name)
						this.redNumber = this.grand_lotto_list_number[this.bg_active].red.length
						if(this.redNumber + this.blueNumber > 7) {
							this.text = '复式'
						}
					} 
				}
			},
			handleChooseblueball(item,index){
				if(this.unionShow === 1){
					if(item.selected === true){
						this.$refs.uToast.show({
						    type:'default',
						    message:'该号码已被选为拖码，不能用作胆码',
						}) 
						return
					}
					item.selected = 'union'
					const index3 = this.grand_lotto_list_number[this.bg_active].blue_drag.indexOf(item.name)
					if(index3 !== -1){
						item.selected = ''
						this.grand_lotto_list_number[this.bg_active].blue_drag.splice(index3 , 1)
						
					}else{
						if(this.grand_lotto_list_number[this.bg_active].blue_drag.length <= 0){
							this.grand_lotto_list_number[this.bg_active].blue_drag.push(item.name)
						}else{
							item.selected = ''
							this.$refs.uToast.show({
							    type:'default',
							    message:'后区胆码只能选一个',
							}) 
						}
					}
				}else{
					item.selected =! item.selected
					const index1 = this.grand_lotto_list_number[this.bg_active].blue.indexOf(item.name)
					if(index1 !== -1){
						this.grand_lotto_list_number[this.bg_active].blue.splice(index1 , 1)
						this.blueNumber = this.grand_lotto_list_number[this.bg_active].blue.length
						if(this.redNumber + this.blueNumber < 7) {
							this.text = '单式'
						}
					}else{
						this.grand_lotto_list_number[this.bg_active].blue.push(item.name)
						this.blueNumber = this.grand_lotto_list_number[this.bg_active].blue.length
						if(this.redNumber + this.blueNumber > 7) {
							this.text = '复式'
						}
					} 
				}
			},
			handleAdd(){
				
				this.grand_lotto_list_number.forEach(item => {
					
					
					const minForntNum = 5
					const minBackNum = 2
				
					if(item.red.length + item.red_drag.length < minForntNum){
						//红球数量大于5个
						this.$refs.uToast.show({
						    type:'default',
						    message:'红球数量大于5个',
						}) 
						return;
					}
					if(item.blue.length + item.blue_drag.length < minBackNum){
						//蓝球数量大于2个
						this.$refs.uToast.show({
						    type:'default',
						    message:'蓝球数量大于2个',
						}) 
						return;
					}
					
					
					if(item.red_drag.length > minForntNum - 1){
						//红球胆拖球上数量不能大于4个
						this.$refs.uToast.show({
						    type:'default',
						    message:'红球胆拖球上数量不能大于4个',
						}) 
						return;
					}
					
					if(item.blue_drag.length > minBackNum - 1){
						//蓝球胆拖球上数量不能大于1个
						this.$refs.uToast.show({
						    type:'default',
						    message:'蓝球胆拖球上数量不能大于1个',
						}) 
						return;
					}
					
					if(this.grand_lotto_list_number[0].red_drag.length > 0 || this.grand_lotto_list_number[0].blue_drag > 0){
						this.$refs.uToast.show({
						    type:'default',
						    message:'胆拖模式下,只准许一注',
						})
						 return
					}
					this.red_ball_list.forEach(item => {
						item.selected = false
					})
					this.blue_ball_list.forEach(item => {
						item.selected = false
					})
					this.grand_lotto_list_number.push({
						type:1,
						periods:'0',
						num:1,
						model:'',
						red:[],
						blue:[],
						red_drag:[],
						blue_drag:[],
					})
				
				this.bg_active = this.grand_lotto_list_number.length -1
				})
			},
			async handleSave(){
				let params = this.grand_lotto_list_number
				let res = await this.$api.inheadlottery(params)
				if(res.code === 0){
					this.$refs.uToast.show({
					    type:'default',
					    message:res.msg,
					})
				}else{
					this.$refs.uToast.show({
					    type:'success',
					    message:res.msg,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.next_content{
		width: 346px;
		margin: 0 auto;
		margin-top: 40px;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 10px;
		background-color: $white_color;
		border-radius: $radius_eight;
		.next_top{
			width: 100%;
			height: 45px;
			display: flex;
			.next_top_left{
				flex: 0.3;
				.left_btn{
					width: 88px;
					height: 32px;
					border: 1px solid $primary_color;
					text-align: center;
					line-height: $line-height-32;
					color:$primary_color ;
					border-radius: $radius_16;
				}
				.left_change_btn{
					width: 88px;
					height: 32px;
					border: 1px solid $primary_color;
					text-align: center;
					line-height: $line-height-32;
					color:$white_color ;
					border-radius: $radius_16;
					background: linear-gradient(to right, #FF5A43, #FA2450)
				}
			}
			.next_top_right{
				flex: 0.7;
				text-align: right;
				line-height:$line-height-32;
				font-weight: bold;
				color: $primary_color;
			}
		}
		.red_ball{
			width: 100%;
			height: 30px;
			line-height: $line-height-30;
			font-size: $font-size-14;
			box-sizing: border-box;
			padding-left: 10px;
			color: $primary_color;
			.red_more{
				margin-left: 5px;
				color: $gray_color;
			}
		}
		.red_list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.isRedactive{
				width: 30px;
				height: 35px;
				border-radius: 50%;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: 27px;
				color: $white_color;
				font-weight: bold;
				font-size: $font-size-12;
				background-image: url('../../../static/image/red_ball.png');
				background-size: 100% 100%;
	
			}
			.isNormalRed{
				width: 25px;
				height: 25px;
				border-radius: 50%;
				background-color: $qgray_color;
				border: 1px solid $gray_color;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: $line-height-25;
				color: $black_color;
				font-weight: bold;
				font-size: $font-size-12;
			}
			.isUnionactive{
				width: 27px;
				height: 27px;
				border-radius: 50%;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: 27px;
				color: $white_color;
				font-weight: bold;
				font-size: $font-size-12;
				background-image: url('../../../static/image/z_text_ball.png');
				background-size: 100% 100%;
			}
		}
		.red_blue{
			width: 100%;
			height: 30px;
			line-height: $line-height-30;
			font-size: $font-size-14;
			box-sizing: border-box;
			padding-left: 10px;
			margin-top: 10px;
			color: blue;
			.red_more{
				margin-left: 5px;
				color: $gray_color;
			}
		}
		.blue_list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.isblueactive{
				width: 27px;
				height: 27px;
				border-radius: 50%;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: 27px;
				color: $white_color;
				font-weight: bold;
				font-size: $font-size-12;
				background-image: url('../../../static/image/blue_ball.png');
				background-size: 100% 100%;
			
			}
			.isNormalblue{
				width: 25px;
				height: 25px;
				border-radius: 50%;
				background-color: $qgray_color;
				border: 1px solid $gray_color;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: $line-height-25;
				color: $black_color;
				font-weight: bold;
				font-size: $font-size-12;
			}
			.isYellowball{
				width: 27px;
				height: 27px;
				border-radius: 50%;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: 27px;
				color: $white_color;
				font-weight: bold;
				font-size: $font-size-12;
				background-image: url('../../../static/image/blue_ball.png');
				background-size: 100% 100%;
			}
			.isUnionactive{
				width: 27px;
				height: 27px;
				border-radius: 50%;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: 27px;
				color: $white_color;
				font-weight: bold;
				font-size: $font-size-12;
				background-image: url('../../../static/image/z_text_ball.png');
				background-size: 100% 100%;
			}
		}
		.save{
			width: 95%;
			height: 36px;
			margin: 0 auto;
			margin-top: 20px;
			border-radius: $radius_30;
			text-align: center;
			line-height: 36px;
			color: $white_color;
			font-size: $font-size-14;
			font-weight: bold;
			background: linear-gradient(to right, #FF5A42, #F92350)
		}
		.top_list{
			width: 95%;
			height: 200px;
			margin: 0 auto;
			border-radius: $radius_four;
			box-sizing: border-box;
			padding: 10px;
			overflow: auto;
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE10+ */
			&::-webkit-scrollbar {
			  display: none; /* ChromeSafari */
			}
			// .is_bg_active{
			// 	background-color: green;
			// }
			.list_content{
				width: 100%;
				// background-color: $qgray_color;
				box-sizing: border-box;
				padding: 10px;
				border-radius: $radius_eight;
				display: flex;
				margin-bottom: 10px;
				.left_close{
					flex: 0.1;
					@include centerAline();
					.close_img{
						width: 30px;
						height: 30px;
					}
				}
				.middle_red{
					flex: 0.85;
					.start_ball{
						width: 100%;
						.dragging_num{
							display: flex;
							flex-wrap: wrap;
							.dra_item {
								width: 25px;
								height: 30px;
								margin-left: 3px;
								text-align: center;
								line-height: 25px;
								font-weight: bold;
								background-image: url('../../../static/image/red_ball.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								font-weight: bold;
								font-size: $font-size-12;
								color: $white_color;
							}
							.dra_item_drag{
								width: 25px;
								height: 25px;
								margin-left: 3px;
								text-align: center;
								line-height: 25px;
								font-weight: bold;
								background-image: url('../../../static/image/z_text_ball.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								font-weight: bold;
								font-size: $font-size-12;
								color: $white_color;
							}
						}
					}
					.last_ball{
						width: 100%;
						.dragging_num{
							display: flex;
							flex-wrap: wrap;
							.dra_item {
								width: 25px;
								height: 25px;
								margin-left: 3px;
								text-align: center;
								line-height: 25px;
								font-weight: bold;
								background-image: url('../../../static/image/blue_ball.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								font-weight: bold;
								font-size: $font-size-12;
								color: $white_color;
							}
							.dra_item_drag{
								width: 25px;
								height: 25px;
								margin-left: 3px;
								text-align: center;
								line-height: 25px;
								font-weight: bold;
								background-image: url('../../../static/image/z_text_ball.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								font-weight: bold;
								font-size: $font-size-12;
								color: $white_color;
							}
						}
					}
				}
				.add{
					flex:0.05;
					@include centerAline();
					font-size: $font-size-20;
					color: $gray_color;
				}
				.middle_blue{
					flex: 0.3;
					.middle_start{
						display: flex;
						margin-bottom: 5px;
						.text{
							flex: 0.3;
							font-size: $font-size-14;
							font-weight: bold;
							@include centerAline();
						}
						.q_ball{
							flex: 0.7;
							display: flex;
							flex-wrap: wrap;
							.dragging_num{
								width: 100%;
								display: flex;
								flex-wrap: wrap;
								.dra_item{
									width: 20px;
									height: 20px;
									margin-left: 3px;
									text-align: center;
									line-height: 20px;
									font-weight: bold;
									background-image: url('../../../static/image/z_text_ball.png');
									background-size: 100% 100%;
									background-repeat: no-repeat;
									font-weight: bold;
									font-size: $font-size-12;
									color:$white_color;
								}
							}
						}
					}
					.middle_last{
						display: flex;
						.text{
							flex: 0.3;
							font-size: $font-size-14;
							font-weight: bold;
						}
						.h_ball{
							flex: 0.7;
							display: flex;
							flex-wrap: wrap;
							.dragging_num{
								width: 100%;
								display: flex;
								flex-wrap: wrap;
								.dra_item{
									width: 20px;
									height: 20px;
									margin-left: 3px;
									text-align: center;
									line-height: 20px;
									font-weight: bold;
									background-image: url('../../../static/image/z_text_ball.png');
									background-size: 100% 100%;
									background-repeat: no-repeat;
									font-weight: bold;
									font-size: $font-size-12;
									color:$white_color;
								}
							}
						}
					}
				}
				.beilv{
					flex:0.1;
					@include centerAline();
					.beilv_content{
						text-align: center;
						font-weight: bold;
						background-color: $primary_color;
						color: $white_color;
						border-radius: $radius_four;
						box-sizing: border-box;
						padding: 5px;
					}
				}
			}
		}
		.btn_list{
			width: 95%;
			margin: 0 auto;
			height: 60px;
			box-sizing: border-box;
			padding: 10px;
			display: flex;
			justify-content: space-around;
			.btn{
				width: 90px;
				height: 36px;
				background: linear-gradient(to right, #FF5A43, #FA2450);
				border-radius: $radius_30;
				text-align: center;
				line-height: $line-height-36;
				font-size: $font-size-14;
				color: $white_color;
			}
		}
	}
</style>